<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="dialog"
    title="区域绘制"
    width="950px"
  >
    <canvas
      id="canvas"
      @mousedown="canvasDown($event)"
      @mouseup="canvasUp($event)"
      @mousemove="canvasMove($event)"
    ></canvas>
    <video id="myvideos" ref="videoPlayer" :src="urlVideo"></video>
    <div class="btn">
      <el-radio v-model="radio" label="1" style="margin-top:18px;"
        >开始区域</el-radio
      >
      <el-radio v-model="radio" label="2" style="margin-top:12px;"
        >结束区域</el-radio
      >
      <el-button style="margin-top:20px;" @click="onReset">重置绘制</el-button>

      <el-button
        type="primary"
        style="margin-bottom:200px;margin-top:30px;margin-left: 0;"
        @click="handlePreview"
        >视频预览</el-button
      >

      <el-button type="primary" style="margin-left: 0;" @click="onSave"
        >提交执行</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import crudJob from '@/api/system/task'

export default {
  data() {
    return {
      dialog: false,
      taskId: null,
      urlVideo: '',
      radio: '1',
      canvas: null,
      context: {},
      imgcontext: {},
      painting: false,
      start: null,
      end: null
    }
  },
  methods: {
    initCanvas() {
      const _this = this
      this.$nextTick(() => {
        console.log('初始化canvas')
        _this.canvas = document.getElementById('canvas')
        _this.context = _this.canvas.getContext('2d')
        //设置canvas的宽高
        _this.canvas.width = _this.canvas.clientWidth
        _this.canvas.height = _this.canvas.clientHeight
        _this.context.fillStyle = 'black' //设置填充颜色
        _this.start = { startX: 0, startY: 0, endX: 0, endY: 0 }
        _this.end = { startX: 0, startY: 0, endX: 0, endY: 0 }
      })
    },
    canvasDown(e) {
      this.painting = true
      let cleft = this.getX(this.canvas)
      let ctop = this.getY(this.canvas)
      if (this.radio === '1') {
        this.start.startX = e.clientX - cleft + document.body.scrollLeft
        this.start.startY = e.clientY - ctop + document.body.scrollTop
      } else {
        this.end.startX = e.clientX - cleft + document.body.scrollLeft
        this.end.startY = e.clientY - ctop + document.body.scrollTop
      }
    },
    canvasMove(e) {
      if (this.painting === true) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
        let cleft = this.getX(this.canvas)
        let ctop = this.getY(this.canvas)
        let xLen = e.clientX - cleft + document.body.scrollLeft
        let yLen = e.clientY - ctop + document.body.scrollTop
        if (this.radio === '1') {
          this.start.endX = xLen
          this.start.endY = yLen
        } else {
          this.end.endX = xLen
          this.end.endY = yLen
        }
        if (this.start !== null) {
          this.strokeRect(this.start, '#FF0000')
        }
        if (this.end !== null) {
          this.strokeRect(this.end, '#0000FF')
        }
        if (xLen >= this.canvas.width || yLen >= this.canvas.height) {
          this.canvasUp()
        }
      } else {
        console.log('啥都不做')
      }
    },
    canvasUp() {
      this.painting = false
    },
    strokeRect(rect, color) {
      this.context.strokeStyle = color
      this.context.strokeRect(
        rect.startX,
        rect.startY,
        rect.endX - rect.startX,
        rect.endY - rect.startY
      )
    },
    getX(obj) {
      let parObj = obj
      let left = obj.offsetLeft
      while ((parObj = parObj.offsetParent)) {
        left += parObj.offsetLeft
      }
      return left
    },

    getY(obj) {
      let parObj = obj
      let top = obj.offsetTop
      while ((parObj = parObj.offsetParent)) {
        top += parObj.offsetTop
      }
      return top
    },
    onReset() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.start = { startX: 0, startY: 0, endX: 0, endY: 0 }
      this.end = { startX: 0, startY: 0, endX: 0, endY: 0 }
    },
    onSave() {
      const taskRegional = {
        taskId: this.taskId,
        canvasWidth: this.canvas.width,
        canvasHeight: this.canvas.height,
        startRegional: this.start,
        endRegional: this.end
      }
      console.log(taskRegional)
      crudJob
        .run(taskRegional)
        .then(() => {
          this.$notify({
            title: '',
            message: '提交成功',
            type: 'success'
          })
          this.cancel()
        })
        .catch(err => {
          console.log(err)
          this.$notify.error({
            title: '',
            message: '操作失败'
          })
        })
    },
    cancel() {
      this.onReset()
      this.dialog = false
      this.urlVideo = ''
      this.radio = '1'
      this.painting = false
      this.start = null
      this.end = null
    },
    handlePreview() {
      const videoPlayer = this.$refs.videoPlayer
      videoPlayer.currentTime = 0
      videoPlayer.play()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
  height: 460px;
  position: relative;
}

::v-deep .el-row {
  margin: 0 !important;
  background-color: aqua;
}

.btn {
  position: absolute;
  right: 0;
  width: 118px;
  height: 100%;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  margin: 5px;
  width: 800px;
  height: 450px;
}

#canvas {
  z-index: 2;
}
#myvideos {
  width: 800px;
  height: 450px;
  margin: 5px;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f5f7fa;
}
</style>
